<template>
    <div>
		<el-dialog :title="title" :visible.sync="open" width="500px" @close="commitOnClose">
			<el-form ref="saveOrEditForm" :model="saveData" label-width="120px">
				<el-form-item :label="translate('MENU.PARENT_ID')" prop="parentId">
					<el-input v-model="saveData.parentId" :disabled="parentIdReadOnly || !isAdd" :placeholder="translate('FROM.PLACEHOLDER', {param: 'MENU.PARENT_ID'})"/>
				</el-form-item>
				<el-form-item :label="translate('AUTHORITY.MENU_ID')" prop="menuId">
					<el-input v-model="saveData.menuId" :disabled="!isAdd" :placeholder="translate('FROM.PLACEHOLDER', {param: 'AUTHORITY.MENU_ID'})"/>
				</el-form-item>
				<el-form-item :label="translate('AUTHORITY.NAME')" prop="name">
					<el-input v-model="saveData.name" :placeholder="translate('FROM.PLACEHOLDER', {param: 'AUTHORITY.NAME'})"/>
				</el-form-item>
				<el-form-item :label="translate('MENU.ICON')" prop="icon">
					<el-input v-model="saveData.icon" :placeholder="translate('FROM.PLACEHOLDER', {param: 'MENU.ICON'})" :suffix-icon="saveData.icon"/>
				</el-form-item>
				<el-form-item :label="translate('COMMON.SORT')" prop="sort">
					<el-input-number :min="0" v-model="saveData.sort" :placeholder="translate('FROM.PLACEHOLDER', {param: 'COMMON.SORT'})"/>
				</el-form-item>
				<el-form-item :label="translate('MENU.URL')" prop="url">
					<el-input v-model="saveData.url" :placeholder="translate('FROM.PLACEHOLDER', {param: 'MENU.URL'})"/>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">{{translate('FROM.SUBMIT')}}</el-button>
				<el-button type="primary" @click="cancel">{{translate('FROM.CANCEL')}}</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {UserApi} from '@/api';
	export default {
		name: "CustomForm",
		props: {
			dicts: {
				type: Object,
				default: function () {
					return {}
				}
			},
			isAdd: {
				type: Boolean,
				default: true,
			},
			selectRow: {
				type: Object,
				default: function () {
					return {}
				},
			},
			onFresh: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				title: '',
				saveData: {},
				open: false,
				parentIdReadOnly: false
			}
		},
		watch: {
			onFresh: function (value) {
				this.open = value;
				if (value) {
					this.resetData();
				}
			}
		},
		mounted() {
		},
		methods: {
			async resetData() {
				if (this.isAdd){
					this.title = this.translate('FROM.ADD_MODULE', {module: 'Menu'});
					this.parentIdReadOnly = !!this.selectRow.menuId;
					this.saveData = {parentId: this.selectRow && this.selectRow.menuId};
				}else {
					this.saveData = this.selectRow;
					this.isAdd = false;
					this.title = this.translate('FROM.UPDATE_MODULE', {module: 'Menu'});
				}
			},
			async submitForm() {
				let result = (this.isAdd) ? (await UserApi.menu.save(this.saveData)) : (await UserApi.menu.edit(this.saveData.menuId, this.saveData));
				if (result.success) {
					this.Message.success(this.translate(this.isAdd ? 'FROM.ADD_SUCCESS' : 'FROM.UPDATE_SUCCESS'));
					this.commitOnClose();
				}
			},
			cancel() {
				this.saveData = {};
				this.commitOnClose();
			},
			commitOnClose() {
				this.$emit('on-close');
			}
		}
	};
</script>

<style scoped>

</style>
